<template>
	<view class="new-install-app-page">
		<Tips title="小贴士" :des="des" />
		<view class="list">
			<list v-if="loading">
				 <view  v-if="apps.length > 0"  v-for="(app, index) in apps" :key="Math.random() * 10000" class="list-item">
						 <image style="width: 50px;height: 50px;" :src="app.image" />
						  <view class="title">{{ app.name }}</view>
						 <view  class="rightIcon postion-about">
							  <view  class="right-icon base-right-icon " @click="() => setUseStatus({appId: app.id, status: 'ON' , studentId: app.studentId})">
									<!-- {{ Number(app.type) === 2 ? "允许使用" : "禁止使用"}} -->
														允许使用
							  </view>
							  <view  class="disabled-use base-right-icon last-icon" @click="() => setUseStatus({appId: app.id, status:'OFF', studentId: app.studentId})">
									<!-- {{ Number(app.type) === 2 ? "允许使用" : "禁止使用"}} -->
									禁止使用
							  </view>
						 </view>
				  </view >
				  <view v-else>
					  <Empt description="暂无新安装的应用" />
				  </view>
			</list>
			<view v-else class="loadingHomePage">
				<Loading /> 
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed, onMounted } from 'vue'
	import Tips from "@/components/tips/index.vue"
	import Empt from "@/components/Empt/index.vue"
	import Loading from "@/components/loading.vue"
	import {  onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
	import { homeServer } from '@/common/index'
	import { useStudentListStore } from "@/stores/useStudentList.js"
	import { urlHelp, mock } from "@/utils/index"
	import { useBound } from "@/hooks/useBound.ts"
	const {tipBoundStudent, studentIsEmpt} = useBound();
	
	const studentStore = useStudentListStore();
	const curStd = computed(() => studentStore.currentStudent);
	
	const loading = ref(false)
	const apps = ref([]); // 新安装应用
	const page = ref(1);
	const size = ref(10);
	const des = ref([
		'1.孩子手机上新安装的App都会在下面列表中显示。',
		{
			text: '2.使用帮助',
			type: 'newInstall'
		}
	]);
	
	
	const queryDailyStatus = (dailyStatus, dailyStartTime, dailyEndTime) => {
		// 日常使用状态【1-禁用，2-不限时，3-限制时间段】
		const s = [
			{
				value: 1,
				label: '禁用',
				color: "#900"
			},
			{
				value: 2,
				label: '不限时',
				color: "#2BC888"
			},
			{
				value: 3,
				label: '限制时间段',
				color: "#ffa500"
			}
		];
		const { label = "", value, color } = s.find(c => c.value === Number(dailyStatus))
		let txt = ''
		if (value === 3) {
			txt = `限制时间段${dailyStartTime} - ${dailyEndTime}`
		} else {
			txt = label
		}
	
		return {
			txt,
			color
		}
	}
	
	// 设置是否可用
	const setUseStatus = async ({appId, status, studentId}) => {
		try{
				if(!mock.isLogged()){
						tipBoundStudent();
						return
					}
			const { status: code } = await homeServer.onOffApp({appId, status, studentId})
			if(code === '200'){
				uni.showToast({
					title:"设置成功",
					icon:"success"
				})
				newApps()
			} else {
				uni.showToast({
					title:"设置失败",
					icon:"error"
				})
			}
		}catch(e){
			console.log(e)
			//TODO handle the exception
		}
	}
	
	// 获取新安装应用
	const newApps = async () => {
		const studentId = curStd.value?.id;
		loading.value = false;
		uni.showLoading({
			title:"加载中"
		})
		console.log("s会否", studentId)
		if(studentId){
			try{
				const params = {
					page: page.value,
					size: size.value,
					studentId
				}
				const {status, data} = await homeServer.newApps(params);
				if(status === '200'){
					if(page.value === 1){
						apps.value = []	
					}
					apps.value = data.map(item => urlHelp.imgAddPrefix(item, 'image'));
					loading.value = true;
					uni.hideLoading()
					if(Array.isArray(data) && data.length === 0){
						size.value = 10;
					}
				}
			}catch(e){				
				console.log(e)
				//TODO handle the exception
			}
		} else{
			loading.value = true;
			uni.hideLoading()
			console.log('获取新安装的app，无法找到学生id')
		}
		loading.value = true;
		uni.hideLoading()
	}
	
	
	//  下拉刷新
	onPullDownRefresh(() => {
		//  所有数据都需要重置
		size.value += 10;
		newApps();
		uni.stopPullDownRefresh();
	});
	
	//  触底加载
	onReachBottom(() => {
		//  所有数据都需要重置
		size.value += 10;
		newApps();
		uni.stopPullDownRefresh();
	});
	
	// 设置mock数据  
	const setMock = () => {
		const data =  JSON.parse(JSON.stringify(mock.NEW_INSTALL.data))
		apps.value = data.map(item => urlHelp.imgAddPrefix(item, 'image'));
		loading.value = true;
	}
	
	onMounted(() => {
		if(!mock.isLogged()){
			console.log('没有登录')
			setMock()
		} else {
			console.log('已经登录----')
			newApps()
		}
	})
	
	
	
</script>


<style lang="scss">
	page {
		background-color: #f5f9fa;
	}
	
	.list-item{
		position: relative;
		display: flex;
		align-items: center;
		.postion-about{
			position: absolute;
			right: 30upx;
			// top: 37%;
		}
	}
	
	.loadingHomePage{
		background-color: rgba(0, 0, 0, 0.01);
		width: 100vw;
		height: calc(100vh - 300upx);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.new-install-app-page{
		.list{
			background-color: #fff;
			margin-top: 40upx;
			.title{
				margin-left: $appIconLeftMarg;
				color: #000;
				font-size: $appIconTxt;
				height:100%;
				// margin-top: 40upx;
				display: flex;
				align-items: center;
			}
			.rightIcon{
				height:inherit;
				display: flex;
				align-items: center;
				.base-right-icon{
					width:150upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					font-size: 26upx;
					border-radius: 30upx;
				}
				.right-icon{
					background-color: #d5f3e7 ;
					color: #2BC888;
				}
				.disabled-use{
					color: #fff;
					background: #ff5a5a;
				}
				.last-icon{
					margin-left: 20upx;
				}
			}
			
		}
	}
</style>


<style lang="scss" scoped>
	.new-install-app-page{}
</style>